<template>
    <div class="login-container">
      <h1>登录</h1>
      <form @submit.prevent="login">
        <div class="input-group">
          <label for="username">用户名</label>
          <input v-model="username" id="username" placeholder="用户名" required />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input v-model="password" type="password" id="password" placeholder="密码" required />
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {
      login() {
        if (this.username === 'admin') {
          localStorage.setItem('userRole', 'admin');
        } else {
          localStorage.setItem('userRole', 'student');
        }
        localStorage.setItem('isAuthenticated', true);
        this.$router.push('/home'); // 登录成功后跳转到首页
      },
    },
  };
  </script>
  
  <style scoped>
  .login-container {
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }
  
  .input-group {
    margin-bottom: 15px;
    text-align: left;
  }
  
  .input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  .input-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
  
  button {
    width: 100%;
    padding: 10px;
    background-color: #42b983;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #3aa876;
  }
  </style>